<template>
    <div class="qilin-elementUI">
        <QilinExplain title="el-table行实现托拉拽变换顺序" date="2023-08-11">
            <template v-slot:content>
                <div class="drag-elTable">
                    <el-table :data="tableData2" border size="mini" row-key="name">
                        <el-table-column label="字段名称" prop="name"></el-table-column>
                        <el-table-column label="数值" prop="number"></el-table-column>
                        <el-table-column label="操作" width="120" fixed="right">
                            <template v-slot:default="scope">
                                <el-button type="text">编辑</el-button>
                                <el-button type="text">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <CodeMirror :codeValue="getCodeValue5"></CodeMirror>
            </template>
        </QilinExplain>
        <QilinExplain title="表格高度滚动条以及搜索选项展开收缩" date="2023-06-26">
            <template v-slot:content>
                <div style="display:flex;flex-flow:column nowrap;height:600px;">
                    <div class="qilin-performanceStatistics-header">
                        <el-form inline size="mini" :model="formSearchConfig" ref="formSearchConfig">
                            <el-form-item label="姓名：" prop="userName">
                                <el-input type="text" placeholder="请输入" 
                                    v-model="formSearchConfig.userName"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="部门：" prop="department">
                                <el-input v-model="formSearchConfig.department" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="年份：" prop="year">
                                <el-date-picker v-model="formSearchConfig.year" type="year"
                                    placeholder="请选择" value-format="yyyy"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="月份：" prop="month">
                                <el-select v-model="formSearchConfig.month" placeholder="请选择">
                                    <el-option v-for="item in 12" :key="item" :label="item+'月'" :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="qilin-search-more">
                                <span v-if="!showMore" @click="showMore=true">展开<el-icon class="el-icon-arrow-down"></el-icon></span>
                                <span v-else @click="showMore=false">收起<el-icon class="el-icon-arrow-up"></el-icon></span>
                            </div>
                            <el-collapse-transition>
                                <div class="qilin-search-more-form" v-show="showMore">
                                    <el-form-item label="绩效计划名称：" prop="performancePlanName">
                                        <el-input type="text" placeholder="请输入" 
                                            v-model="formSearchConfig.performancePlanName"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                            </el-collapse-transition>
                            <el-form-item class="qilin-form-search-btn">
                                <el-button type="primary">查询</el-button>
                                <el-button type="default">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="qilin-table-scroll">
                        <el-table border size="mini" :data="tableData" class="hide-scrollbar" height="100%">
                            <el-table-column type="selection" width="50" align="center"></el-table-column>
                            <el-table-column label="工号" prop="number" align="center" width="90"></el-table-column>
                            <el-table-column label="姓名" prop="name" align="center" width="120"></el-table-column>
                            <el-table-column label="部门" prop="department" align="center"></el-table-column>
                            <el-table-column label="绩效计划名称" prop="performancePlanningName" align="center"></el-table-column>
                            <el-table-column label="年份" prop="year" align="center" width="70"></el-table-column>
                            <el-table-column label="月份" prop="month" align="center" width="70"></el-table-column>
                            <el-table-column label="工作内容" prop="workContent" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column label="自评分" prop="ownScore" align="center"></el-table-column>
                            <el-table-column label="组长评分" prop="groupleaderScore" align="center"></el-table-column>
                            <el-table-column label="副经理评分" prop="managerScore" align="center"></el-table-column>
                            <el-table-column label="得分" prop="score" width="70" align="center"></el-table-column>
                            <el-table-column label="操作" fixed="right" width="100" align="center">
                                <template v-slot:default="scope">
                                    <el-button type="text" @click="viewData(scope.row)">查看</el-button>
                                </template>
                            </el-table-column>
                            <template v-slot:empty>
                                <div class="qilin-table-empty">
                                    <img src="@/assets/images/dijia1.jpg" alt="">
                                    <p>暂无内容~</p>
                                </div>
                            </template>
                        </el-table>
                        <el-pagination :current-page="paginationsObj.currentPage" :page-sizes="paginationsObj.pageSizes" 
                            :page-size="paginationsObj.pageSize" :total="paginationsObj.total" 
                            :layout="paginationsObj.layout" background @current-change="handleCurrentPage" 
                            @size-change="handleSizeChange"
                        ></el-pagination>
                    </div>
                </div>
                <CodeMirror :codeValue="getCodeValue4"></CodeMirror>
            </template>
        </QilinExplain>
        <QilinExplain title="隐藏选中表头复选框设置" date="2023-02-14">
            <template v-slot:content>
                <el-table stripe border
                    :data="[
                        {
                            name:'EDGQilin',
                            age:28
                        }
                    ]"
                    :header-cell-class-name="classMethod"
                >
                    <el-table-column type="selection"
                        :selectable="()=>{
                            return false
                        }"
                    ></el-table-column>
                    <el-table-column label="姓名" prop="name"></el-table-column>
                    <el-table-column label="年龄" prop="age"></el-table-column>
                </el-table>
                <CodeMirror :codeValue="getCodeValue3"></CodeMirror>
            </template>
        </QilinExplain>
        <QilinExplain title="合并复杂表格" date="2023-01-05">
            <template v-slot:content>
                <el-table stripe border :data="tableData1" :span-method="setRowCol"
                    :header-cell-style="headerStyle"
                >
                    <el-table-column label="项目" prop="project" minWidth="90" align="left"></el-table-column>
                    <el-table-column label="指标名称" prop="idxName" minWidth="130" align="left"></el-table-column>
                    <el-table-column label="指标名称" prop="subName" minWidth="130" align="left"></el-table-column>
                    <el-table-column label="上季末" prop="lastValue" minWidth="130" align="left"></el-table-column>
                    <el-table-column label="期末值" prop="endValue" minWidth="130" align="left"></el-table-column>
                    <el-table-column label="指标限额" prop="limitValue" minWidth="130" align="left"></el-table-column>
                </el-table>
                <CodeMirror :codeValue="getCodeValue2"></CodeMirror>
            </template>
        </QilinExplain>
        <QilinExplain title="设置日期范围不可跨年选择" date="2022-11-23">
            <template v-slot:content>
                <el-date-picker v-model="time" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholde="开始时间" end-placeholde="结束时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placement="bottom-start" :default-time="['00:00:00', '23:59:59']" size="mini"></el-date-picker>
                <CodeMirror :codeValue="getCodeValue1"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>
<script>
import QilinExplain from "@/components/QilinExplain.vue";
import CodeMirror from "@/components/CodeMirror.vue";
import Sortable from "sortablejs";
export default {
    components: {
        QilinExplain,
        CodeMirror,
    },
    data() {
        return {
            // 设置日期范围不可跨年选择相关变量
            time: "",
            selectDate: null,
            pickerOptions: {
                //事件快捷选项设置
                disabledDate: (time) => {
                    if (this.selectDate == null) {
                        return false;
                    } else {
                        return (
                            this.selectDate.getFullYear() != time.getFullYear()
                        );
                    }
                },
                onPick: (date) => {
                    if (date.minDate && !date.maxDate) {
                        this.selectDate = date.minDate;
                    } else {
                        this.selectDate = null;
                    }
                },
            },
            tableData1: [
                {
                    project: "自有投资",
                    idxName: "权益类证券规模",
                    subName: "权益类证券规模",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "25006",
                    investType: "1",
                },
                {
                    project: "自有投资",
                    idxName: "非权益类证券规模",
                    subName: "非权益类证券规模",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "51799",
                    investType: "2",
                },
                {
                    project: "自有投资",
                    idxName: "权益类证券盈亏",
                    subName: "权益类证券盈亏",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "-3500",
                    investType: "1",
                },
                {
                    project: "自有投资",
                    idxName: "非权益类证券盈亏",
                    subName: "非权益类证券盈亏",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "-2400",
                    investType: "2",
                },
                {
                    project: "限额指标",
                    idxName: "投资区域集中度（%）",
                    subName: "区域",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤33%",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "投资区域集中度（%）",
                    subName: "集中度",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤33%",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "单一对手规模-主体AA-及以下",
                    subName: "单一对手",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤7亿",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "单一对手规模-主体AA-及以下",
                    subName: "规模(亿元)",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤7亿",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "单一对手规模-主体AA",
                    subName: "单一对手",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤13亿",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "单一对手规模-主体AA",
                    subName: "规模(亿元)",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤13亿",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "单一对手规模-主体AA+",
                    subName: "单一对手",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤18亿",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "单一对手规模-主体AA+",
                    subName: "规模(亿元)",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤18亿",
                    investType: null,
                },
                {
                    project: "限额指标",
                    idxName: "评级集中度-AA-（含）及以下",
                    subName: "集中度",
                    lastVaLue: null,
                    endVaLue: null,
                    limitValue: "≤20%",
                    investType: null,
                },
            ],
            tableData:[
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
                {
                    number:10010,
                    name:"EDGQilin",
                    department:"产品研发部",
                    performancePlanningName:"我的",
                    year:2023,
                    month:6,
                    workContent:"摸鱼",
                    ownScore:75,
                    groupleaderScore:75,
                    managerScore:75,
                    score:75
                },
            ], //表格数据集
            paginationsObj:{ //表格分页配置项
                currentPage:1, //当前页
                pageSize:10, //当前每页数量
                pageSizes:[10,20,30], //每页显示多少条选项集
                total:0, //表格总数量
                layout:"total,sizes,prev,pager,next,jumper"
            },
            formSearchConfig:{ //查询表单配置项
                userName:"",
                department:"",
                year:"",
                month:"",
                performancePlanName:""
            },
            showMore:false, //是否展开更多搜索选项
            tableData2:[ //实现行托拉拽顺序表格数据集
                {
                    name: "部门",
                    number: 2,
                },
                {
                    name: "姓名",
                    number: 1,
                },
                {
                    name: "工号",
                    number: 1,
                },
                {
                    name: "身份证号码",
                    number: 1,
                },
                {
                    name: "手机号码",
                    number: 1
                }
            ]
        };
    },
    computed: {
        // 获取设置日期范围不可跨年选择的核心代码
        getCodeValue1() {
            return `
                data(){
                    return{
                        selectDate: null,
                        pickerOptions: {
                            //事件快捷选项设置
                            disabledDate: (time) => {
                                if (this.selectDate == null) {
                                    return false;
                                } else {
                                    return (
                                        this.selectDate.getFullYear() != time.getFullYear()
                                    );
                                }
                            },
                            onPick: (date) => {
                                if (date.minDate && !date.maxDate) {
                                    this.selectDate = date.minDate;
                                } else {
                                    this.selectDate = null;
                                }
                            }
                        }
                    };
                }
            `;
        },
        // 合并复杂表格的核心代码
        getCodeValue2(){
            return  `
                // 设置复杂表格合并行列
                setRowCol({row,column,rowIndex,columnIndex}){
                    // console.log(rowIndex,columnIndex);
                    if(columnIndex === 0){
                        if(rowIndex === 0){
                            return {
                                rowspan:4,
                                colspan:1
                            };
                        }else if(rowIndex === 4){
                            return {
                                rowspan:9,
                                colspan:1
                            };
                        }else{
                            return {
                                rowspan:0,
                                colspan:0
                            };
                        }
                    }else if(columnIndex === 1){
                        if([0,1,2,3].includes(rowIndex)){
                            return {
                                rowspan:1,
                                colspan:2
                            };
                        }else if(rowIndex === 4){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex === 6){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex === 8){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex === 10){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex === 12){
                            return {
                                rowspan:1,
                                colspan:1
                            };
                        }else{
                            return {
                                rowspan:0,
                                colspan:0
                            };
                        }
                    }else if(columnIndex === 2){
                        if([0,1,2,3].includes(rowIndex)){
                            return {
                                rowspan:0,
                                colspan:0
                            };
                        }else{
                            return {
                                rowspan:1,
                                colspan:1
                            };
                        }
                    }else if(columnIndex === 5){
                        if([0,1,2,3].includes(rowIndex)){
                            return {
                                rowspan:1,
                                colspan:1
                            };
                        }else if(rowIndex === 4){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex === 6){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex ===8){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex ===10){
                            return {
                                rowspan:2,
                                colspan:1
                            };
                        }else if(rowIndex === 12){
                            return {
                                rowspan:1,
                                colspan:1
                            };
                        }else{
                            return {
                                rowspan:0,
                                colspan:0
                            };
                        }
                    }else{
                        return {
                            rowspan:1,
                            colspan:1
                        };
                    }
                },
                // 合并表头
                headerStyle({row,column,rowIndex,columnIndex}){
                    row[2].colSpan=2;
                    row[1].colSpan=0;
                    if(columnIndex === 1){
                        return "display:none"
                    };
                }
            `
        },
        // 隐藏选中表头复选框设置
        getCodeValue3(){
            return `
                // html
                :header-cell-class-name="classMethod"
                // js 禁止选中表头复选框设置-隐藏表头中的全选框
                classMethod(row){
                    if(row.rowIndex ===0 && row.columnIndex === 0){
                        return "qilin-hide";
                    }
                }
                // css
                .el-table /deep/ .qilin-hide .el-checkbox__inner {
                    background-color: #edf2fc;
                    border-color: #DCDFE6;
                    cursor:not-allowed;
                    &::after{
                        // transform: rotate(45deg) scaleY(0);
                        border-color: #edf2fc;
                    }
                }
            `
        },
        // 表格高度滚动条以及搜索选项展开收缩核心代码
        getCodeValue4(){
            return `
                // html
                <div class="qilin-search-more">
                    <span v-if="!showMore" @click="showMore=true">展开<el-icon class="el-icon-arrow-down"></el-icon></span>
                    <span v-else @click="showMore=false">收起<el-icon class="el-icon-arrow-up"></el-icon></span>
                </div>
                <el-collapse-transition>
                    <div class="qilin-search-more-form" v-show="showMore">
                        <el-form-item label="绩效计划名称：" prop="performancePlanName">
                            <el-input type="text" placeholder="请输入" 
                                v-model="formSearchConfig.performancePlanName"
                            ></el-input>
                        </el-form-item>
                    </div>
                </el-collapse-transition>
            `
        },
        // el-table行实现托拉拽变换顺序核心代码
        getCodeValue5(){
            return `
                // html--row-key要写
                <div class="drag-elTable">
                    <el-table :data="tableData2" border size="mini" row-key="name">
                        <el-table-column label="字段名称" prop="name"></el-table-column>
                        <el-table-column label="数值" prop="number"></el-table-column>
                        <el-table-column label="操作" width="120" fixed="right">
                            <template v-slot:default="scope">
                                <el-button type="text">编辑</el-button>
                                <el-button type="text">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                // js
                import Sortable from "sortablejs";
                methods:{
                    rowDrop() {
                        const elDom = document.querySelectorAll(".drag-elTable .el-table__body-wrapper")[0].querySelectorAll("table > tbody")[0];
                        Sortable.create(elDom, {
                            disabled: false, // 是否开启拖拽
                            ghostClass: "sortable-ghost", //拖拽样式
                            animation: 150, // 拖拽延时，效果更好看
                            group: {
                                // 是否开启跨表拖拽
                                pull: false,
                                put: false,
                            },
                            onEnd: (e) => {
                                // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
                                let arr = this.tableData2; // 获取表数据
                                arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
                                this.$nextTick(function () {
                                    this.tableData2= arr;
                                });
                            }
                        });
                    }
                };
                mounted(){
                    this.rowDrop();
                }
            `
        }
    },
    methods: {
        //行拖拽
        rowDrop() {
            const elDom = document.querySelectorAll(".drag-elTable .el-table__body-wrapper")[0].querySelectorAll("table > tbody")[0];
            Sortable.create(elDom, {
                disabled: false, // 是否开启拖拽
                ghostClass: "sortable-ghost", //拖拽样式
                animation: 150, // 拖拽延时，效果更好看
                group: {
                    // 是否开启跨表拖拽
                    pull: false,
                    put: false,
                },
                onEnd: (e) => {
                    // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
                    let arr = this.tableData2; // 获取表数据
                    arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
                    this.$nextTick(function () {
                        this.tableData2= arr;
                    });
                }
            });
        },
        // 设置复杂表格合并行列
        setRowCol({row,column,rowIndex,columnIndex}){
            // console.log(rowIndex,columnIndex);
            if(columnIndex === 0){
                if(rowIndex === 0){
                    return {
                        rowspan:4,
                        colspan:1
                    };
                }else if(rowIndex === 4){
                    return {
                        rowspan:9,
                        colspan:1
                    };
                }else{
                    return {
                        rowspan:0,
                        colspan:0
                    };
                }
            }else if(columnIndex === 1){
                if([0,1,2,3].includes(rowIndex)){
                    return {
                        rowspan:1,
                        colspan:2
                    };
                }else if(rowIndex === 4){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex === 6){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex === 8){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex === 10){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex === 12){
                    return {
                        rowspan:1,
                        colspan:1
                    };
                }else{
                    return {
                        rowspan:0,
                        colspan:0
                    };
                }
            }else if(columnIndex === 2){
                if([0,1,2,3].includes(rowIndex)){
                    return {
                        rowspan:0,
                        colspan:0
                    };
                }else{
                    return {
                        rowspan:1,
                        colspan:1
                    };
                }
            }else if(columnIndex === 5){
                if([0,1,2,3].includes(rowIndex)){
                    return {
                        rowspan:1,
                        colspan:1
                    };
                }else if(rowIndex === 4){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex === 6){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex ===8){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex ===10){
                    return {
                        rowspan:2,
                        colspan:1
                    };
                }else if(rowIndex === 12){
                    return {
                        rowspan:1,
                        colspan:1
                    };
                }else{
                    return {
                        rowspan:0,
                        colspan:0
                    };
                }
            }else{
                return {
                    rowspan:1,
                    colspan:1
                };
            }
        },
        // 合并表头
        headerStyle({row,column,rowIndex,columnIndex}){
            row[2].colSpan=2;
            row[1].colSpan=0;
            if(columnIndex === 1){
                return "display:none"
            };
        },
        // 禁止选中表头复选框设置-隐藏表头中的全选框
        classMethod(row){
            // console.log(row)
            if(row.rowIndex ===0 && row.columnIndex === 0){
                return "qilin-hide";
            }
            // this.$nextTick(()=>{
            //     console.log(document.body.querySelector(".qilin-hide .el-checkbox__inner").style)
            //     document.body.querySelector(".qilin-hide .el-checkbox__inner").style.cursor="not allowed";
            // })
        },
        // 点击查看操作按钮事件监听
        viewData(row){
            console.log(row);
        },
        // 监听切换页码事件
        handleCurrentPage(page){
            console.log(page);
        },
        // 监听切换每页数量事件
        handleSizeChange(size){
            console.log(size);
        },
    },
    mounted(){
        this.rowDrop();
    }
};
</script>
<style lang="less" scoped>
.qilin-elementUI {
    width: 100%;
    padding: 0 10px 40px;
    .qilin-table-scroll{
        // height:600px;
        display:flex;
        flex-flow:column nowrap;
        flex:1;
        overflow:hidden;
        >.hide-scrollbar{
            flex:1;
        }
        >.el-pagination{
            text-align:right;
            margin-top:10px;
        }
    }
    .qilin-performanceStatistics-header{
        background-color:#fff;
        padding:24px 20px 6px;
        border-radius:4px;
        .qilin-search-more{
            display:inline-block;
            line-height: 30px;
            color:#148EFF;
            cursor: pointer;
        }
        >.el-form{
            overflow:hidden;
            position:relative;
            >.el-form-item:nth-last-child(2){
                margin-right:150px;
            }
            .el-date-editor{
                width:120px;
            }
            .el-select{
                width:120px;
            }
            >.el-form-item:first-child,.el-form-item:nth-child(2){
                .el-input{
                    width:120px;
                }
            }
            >.qilin-form-search-btn{
                position:absolute;
                top:0;
                right:0;
            }
        }
    }
}
// .el-table /deep/ .qilin-hide > .cell {
//     display: none;
// }
.el-table /deep/ .qilin-hide .el-checkbox__inner {
    background-color: #edf2fc;
    border-color: #DCDFE6;
    cursor:not-allowed;
    &::after{
        // transform: rotate(45deg) scaleY(0);
        border-color: #edf2fc;
    }
}
</style>